import React from 'react';
import { useMemo } from 'react';
import { useCallback } from 'react';
import { useState } from 'react';

// const Child = () => { 
//   console.log('执行了吗')// a 的值发生改变，就会执行
//   return (
//     <div>child</div>
//   )
// }

const Child = React.memo(() => { // React.memo 高阶组件可以提高组件的性能
  console.log('执行了吗')// a 的值发生改变，就会执行
  return (
    <div>child</div>
  )
})

const App = () => {
  const [a, setA] = useState(10)
  const [b] = useState(100)
  const add = () => {
    setA(a + 1)
  }
  // const testHandler = () => {
  // }

  //  useCallback 以及 useMemo 可以用来 给组件事件包裹，从而提升性能
  // const testHandler = useCallback(() => { // 这个函数是必须额
  //   return (event) => { // 这里是真正函数需要执行的代码
  //   }
  // }, [b])
  const testHandler = useMemo((event) => { // 这里是真正函数需要执行的代码
  }, [b])


  // useMemo 也可以作为计算属性而存在
  const doubleA = useMemo(() => {
    return a * 2
  }, [a])
  return (
    <div>
      <button onClick={ add }>a + 1</button> { a } - { doubleA }
      {/* 可以通过 React.memo 高阶组件提升性能 */}
      {/* <Child b = {b}/> */}
      {/* 每次执行，testHandler 都返回一个新的引用，意味着Child组件的 handler 属性发生改变
        可以通过 useCallback 或者 useMemo 解决
      */}
      <Child b = {b} handler = { testHandler }/>
    </div>
  );
};

export default App;